$(function () {
    let p = {
        pagenum: 1,         //是	int	页码值
        pagesize: 2,         //	是	int	每页显示多少条数据
        cate_id: '',         //否	string	文章分类的 Id
        state: ''
    }
    //渲染整个显示列表
    initArticleList()
    function initArticleList() {
        axios({
            method: "GET",
            url: "/my/article/list",
            params: p
        }).then(res => {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(
                    `
                    <tr>
                    <td>${ele.title}</td>
                    <td>${ele.cate_name}</td>
                    <td>${formDate(ele.pub_date)}</td>
                    <td>${ele.state}</td>
                    <td>  <a href='/article/art_edit.html?id=${ele.Id}' class="layui-btn-xs layui-btn">编辑</a> 
                    <button  data-id='${ele.Id}'class="btnDel layui-btn-xs layui-btn-danger layui-btn">删除</button></td>

                  </tr>
                    `
                )

            });
            let str = arr.join('')
            $('tbody').empty().html(str)
            renderPage(res.data.total)
        })
    }
    //渲染分类下拉菜单里的列表
    initArtCateList()
    let layer = layui.layer
    let form = layui.form
    //select下拉菜单初始化（文章类别）
    function initArtCateList() {
        axios({
            url: '/my/article/cates'
        }).then(res => {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            let arr = [' <option value="">请选择文章所属分类</option>']
            res.data.data.forEach(ele => {
                arr.push(
                    `
                    <option value="${ele.Id}">${ele.name}</option>
                    `
                )

            });
            let str = arr.join('')
            $('[name=cate_id]').empty().html(str)
            //render()可以渲染layui中的select/checkbox/radio
            //内置模块》表单》更新渲染
            form.render()
        })




    }
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        p.cate_id = $('[name=cate_id]').val()
        p.state = $('[name=state]').val()
        initArticleList()
    })
    //分页渲染
    function renderPage(total) {
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox',  //注意，这里的 test1 是 ID，不用加 # 号
            count: total,//数据总数，从服务端得到
            limit: p.pagesize,//一页几个
            curr: p.pagenum, //当前页
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            limits: [2, 3, 5, 10],
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
               // console.log(obj.limit); //得到每页显示的条数

                //首次不执行,页面加载完成后，切换页码时
                if (!first) {
                    //将当前点击的页码传给服务器，进行页面渲染
                    p.pagenum = obj.curr
                    p.pagesize = obj.limit
                    initArticleList()
                }
            }
        });
    }

    //删除事件
    $("tbody").on('click', '.btnDel', function () {
        let id = $(this).attr('data-id')
        // console.log(id);
        layer.confirm('确定要删除吗？', { icon: 3, title: '提示' }, function (index) {

            axios({
                method: 'GET',
                //冒号必须省略，/不能省略
                url: '/my/article/delete/' + id
            }).then(res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }
                layer.msg(res.data.message)
                //删除最后一个数据删除时，页面还是渲染的最后一页的内容，
                //也就是为空，也就是说axios没有渲染到前一页的内容所以p.pagenum要减一
                $('.btnDel').length == 1 && p.pagenum >= 2 && p.pagenum--
                initArticleList()
            })
            layer.close(index);
        });


    })

})